<template>
	<view class="container">
		<u-navbar title="详情"
			background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat">
		</u-navbar>
		<view class="topView" id='topView' ref="topView">
			<view class="topVideoCon">
				<view class="video-wrap" v-if="videoInfo.courseclassification_id !=0 && !isnotVideoPlaying">
					<video class="video-wrap" id="myVideo" :src="vidoeUrl" @stop='videoStop' @pause="videoPause"
						@timeupdate='videoTime' @play="videoPlay" @error="videoErrorCallback"
						:poster='videoInfo.bigimage' :initial-time='starTime' controls enable-play-gesture>
						<cover-view style="position: absolute;top: 128rpx;right: 60rpx;"
							@click="doubleSpeed">倍速:{{beisu}}</cover-view>
					</video>
				</view>
				<view v-if="isnotVideoPlaying" class="cover">
					<image class="cover-image" :src="videoInfo.bigimage" mode="scaleToFill"></image>
				</view>
			</view>


			<view class="audio-view" v-if="!isVedio">
				<view class="play-button-area">
					<!-- <image class="icon-play" :src="playImage" @click="play"></image> -->
					<u-icon class="icon-play" :name="playImage" color="#fe466b" size="60" @click="play"></u-icon>
				</view>
				<view class="play-silder">
					<view class="audio-time">
						<text>{{currentTimeStr}}</text>
					</view>
					<view class="audio-siler">
						<slider :value="position" :min="0" :max="duration.toFixed(0)" :block-size="blockSize"
							:backgroundColor='backgroundColor' :activeColor='activeColor' @changing="onchanging"
							@change="onchange">
						</slider>
					</view>
					<view class="audio-time">
						<text>{{timeStr}}</text>
					</view>
					<view @click="handleRate" style="width: 100%;position:relative;"><text
							style="position: absolute;right: 0rpx;">倍速:×&nbsp;{{beisu}}</text></view>
				</view>

			</view>
			<view class="detail">
				<text class="name">{{videoInfo.name||''}}</text>
				<view class="price" style="min-height: 36px;">
					<!-- {{videoInfo.money||''}} <text class="orgPrice">兑换券</text> -->
				</view>
				<view class="secend-line">
					<u-icon class='icon' name="eye"></u-icon><text
						style="margin-right: 20rpx;">{{videoInfo.reading_volume}}</text>
					<u-icon class='icon' name="calendar"></u-icon>
					<text>{{$u.timeFormat(videoInfo.createtime, 'yyyy-mm-dd hh:MM:ss')}}</text>
					<text style="margin-left: 40rpx;">
						兑换人次：{{videoInfo.sales_volume}}
					</text>
				</view>
			</view>
		</view>
		<scroll-view :scroll-y="true" :style="'height:' + scrollH+'rpx;'">
			<view style="font-size: 36rpx; font-weight: 700; text-align: center; margin-top: 20rpx;">课程内容</view>
			<view class="class-list">
				<view class="" v-for="(item,index) in videoInfo.curriculum" :key="item.id">
					<view class="media" :class="avtivate==index?'play':''" @click="changMedia(item,index)">
						<u-icon :name="item.type==1?'play-circle':'volume-up'" color='#ccc' size='30'></u-icon>
						<view class="product-name">
							{{index+1}}. {{item.name}}
							<view class="study-order" v-if="item.recordText">
								上次学到：{{item.recordText}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="font-size: 36rpx; font-weight: 700; text-align: center;">课程详情</view>
			<view class="content-text">
				<!-- <view class="font-style-xie">大纲</view> -->
				<u-parse :html="videoInfo.outline_content"></u-parse>
				<!-- <view class="font-style-xie">详情</view> -->
				<u-parse :html="videoInfo.content"></u-parse>
			</view>
			<!-- 更多视频 -->
			<!-- <view class="model">
			<view class="font-style-xie">更多视频 <text class="video-num">视频数：6</text></view>
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view class="show-item" v-for="(item, index) in 4" :key="index">
					<view class="image">
						<image src="" mode=""></image>
					</view>
				</view>
			</scroll-view>
		</view> -->
		</scroll-view>
		<view class="page-bottom">
			<view class="icon-text" @click="changeCollect">
				<u-icon v-if="isCollect" name="star-fill" color='#FE5477' size="40"></u-icon>
				<u-icon v-else name="star" color='#FE5477' size="40"></u-icon>
				<view class="text">{{isCollect?'已收藏':'收藏'}}</view>
			</view>
			<view class="icon-text" @click="tokefu">
				<u-icon name="server-fill" color='#FE5477' size="40"></u-icon>
				<view class='text'>客服</view>
			</view>
			<view :class="videoInfo.have?'have':'buy'" @click="toBuy">
				{{videoInfo.have?'已兑换':'立即兑换'}}
			</view>
		</view>
		<u-modal v-model="messageShow" content="是否订阅课程上新通知？" @confirm='messageConfirm' show-cancel-button></u-modal>
	</view>
</template>

<script>
	import {
		mp3PlayMixin
	} from '@/mixin/mp3Play.js'
	import {
		requestSubscribeMessage
	} from '@/mixin/RSMessage.js'

	export default {
		mixins: [mp3PlayMixin, requestSubscribeMessage],
		data() {
			return {
				beisu: 1.0,
				messageShow: false,
				isnotVideoPlaying: true,
				vidoeUrl: '',
				avtivate: -1,
				baseUrl: this.$u.http.config.baseUrl,
				videoInfo: {},
				starTime: 0, //指定视频初始播放位置
				// duration: 0, //指定视频时长
				title: "", // 频的标题，全屏时在顶部展示
				poster: '', //视频封面的图片网络资源地址
				content: '',
				old: {
					scrollTop: 0
				},
				isCollect: true,
				id: '',
				audioUrl: '',
				detailInfo: {
					title: '',
					cover_image: '',
					startTime: 0
				},
				playTime: 0,
				curriculum_id: 0,
				blockSize: 12, //控制滑块的大小
				backgroundColor: '#ccc', //滑块右侧背景条的颜色
				activeColor: '#fe466b', //滑块左侧已选择部分的线条颜色
				duration: 100,
				currentTime: 0,
				currentTimeStr: '00:00',
				timeStr: '00:00',
				isVedio: true,
				scrollH: 0,
				height: 400,
				config: '',
				pageType: "class",
			}
		},
		computed: {
			position() {
				return this.isPlayEnd ? 0 : this.currentTime;
			},
			playImage() {
				return this.isPlaying ? "pause-circle-fill" : "play-circle-fill"
			}
		},
		mounted() {
			let info = uni.createSelectorQuery().select('.topView')
			info.boundingClientRect((res) => {
				console.log('3333333333333', res)
				this.highheightt = res.height
			}).exec(function(res) {})
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollH = res.windowHeight * 750 / res.windowWidth;
					// #ifdef MP-WEIXIN
					that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) - that
						.height - 400;
					// #endif
				}
			});
		},
		onLoad(option) {
			this.id = option.id
			this.getMessageStatus()
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onShow() {
			this.initData()
		},
		onUnload() {
			this.returnPlaytime()
		},
		methods: {
			aaaa() {
				if (this.showPlaybackRate) {
					this.showPlaybackRate = false
				} else {
					this.showPlaybackRate = true
				}
			},
			async messageConfirm() {
				let res = await this.getStatus()
				this.RSMessage(res)
			},
			// 客服
			async tokefu() {
				await this.getConfig()
				let res = await this.$u.api.classService()
				this.toChat(res.data)
			},
			doubleSpeed() {
				if (this.beisu == 2.0) {
					this.beisu = 1.0;
				} else {
					this.beisu = 2.0
				}

				console.log(this.beisu)
				//这里的'myVideo'要和上方video标签的id相对应
				let videoContext = uni.createVideoContext('myVideo', this)
				//括号里面可以设置倍速
				videoContext.playbackRate(this.beisu)
			},
			getConfig() {
				this.$u.api.getChatConfig().then(res => {
					this.config = res.data.corpId
				})
			},
			toChat(data) {
				try {
					wx.openCustomerServiceChat({
						extInfo: {
							url: data.url //客服ID
						},
						corpId: this.config, //企业微信ID
						success(res) {}
					})
				} catch (error) {}
			},
			initData() {
				this.$u.api.getClassDetail({
					id: this.id
				}).then(res => {
					console.log('4444444444444444', res)
					this.isCollect = res.data.is_collection == 1 ? true : false
					this.videoInfo = res.data
					console.log('55555555555555555', this.videoInfo)
				})
			},
			// 返回播放时间
			returnPlaytime() {
				if (this.playTime == 0) return
				console.log('666666666666666', this.playTime)
				let data = {
					curriculum_id: this.curriculum_id,
					curriculum_type: 8,
					second: this.playTime,
					product_id: this.videoInfo.id
				}
				this.$u.api.ProductRecord(data).then(res => {})
			},
			videoPlay() {
				console.log('play')
				this.isnotVideoPlaying = false
				if (this._audioContext) {
					this.pause()
				}
			},
			videoPause(e) {
				console.log('pause', e)
				console.log('7777777777777777', this.playTime)
				this.returnPlaytime()
			},
			videostop(e) {
				console.log('stop', e)
				console.log(this.playTime)
				this.returnPlaytime()
			},
			videoTime(e) {
				this.playTime = e.detail.currentTime
			},
			// 选择播放
			changMedia(item, index) {
				if (this.videoInfo.have == 0) {
					uni.showToast({
						title: "请兑换后观看",
						icon: 'error',
						duration: 1500
					})
					return
				}

				this.avtivate = index
				this.curriculum_id = item.id

				if (item.type != 0) {
					if (this._audioContext && !this.isVedio) {
						console.log(3)
						this.pause()
						this._audioContext = null
					}

					this.isVedio = true
					this.vidoeUrl = item.video_file
					this.starTime = item.record
					setTimeout(() => {
						this.videoContext.play()
					}, 200)
					this.isnotVideoPlaying = false

				} else {
					this.isnotVideoPlaying = true
					this.isVedio = false
					this.videoContext.pause()

					if (this.audioUrl == item.audio_file) {
						console.log(1)
						this.play()
					} else {
						console.log(2)
						this.audioUrl = item.audio_file
						console.log('8888', item.name)
						this.detailInfo.title = item.name
						this.detailInfo.startTime = item.record //(按学习记录播放)
						this.detailInfo.cover_image = this.videoInfo.cover_image
						this.createAudio()
					}
				}
				console.log(this.isnotVideoPlaying)
				this.returnPlaytime()
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			loadMore: function() {
				let nextIndex = this.avtivate + 1
				let nextItem = this.videoInfo.curriculum[nextIndex]

				if (nextItem) {
					this.avtivate = nextIndex
					this.curriculum_id = nextItem.id
					this.changMedia(nextItem, nextIndex)
				} else {
					console.log('131313')
					this.audioUrl = this.audioUrl
					this.detailInfo.title = this.detailInfo.title
					this.detailInfo.startTime = 0 //(按学习记录播放)
					this.detailInfo.cover_image = this.detailInfo.cover_image
					this.createAudio()
				}
				console.log('11111111', nextItem)

			},
			scroll: function(e) {
				console.log('2222222222', e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 收藏
			changeCollect() {
				this.$u.api.collect({
					collection_id: this.videoInfo.id,
					collection_type: 8
				}).then(res => {
					if (res.code == 1) {
						this.isCollect = !this.isCollect
					}
				})
			},
			// 倍速播放
			//this.bgAudioMannager可以通过两种方法获取，一个支持后台播放，具体可以参考官网，我是用的uni.createInnerAudioContext()

			toBuy() {
				if (this.videoInfo.have) return
				this.$u.route('/packageB/pages/hotClassDetail/buy/buy', {
					id: this.videoInfo.id,
					money: this.videoInfo.money,
					name: this.videoInfo.name,
					image: this.videoInfo.cover_image
				})
			}
		}
	}
</script>

<style lang="scss">
	.topVideoCon {
		position: relative;
		width: 100%;
		height: 400rpx;

		.video-wrap,
		.cover {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.video-wrap {
			z-index: 11;
		}

		.cover {
			z-index: 99;
		}

	}

	.container {
		overflow-x: hidden;
		position: relative;

		.audio-view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 50rpx 0rpx 50rpx;
			background-color: #FFFFFF;
		}

		.play-time-area {
			display: flex;
			align-items: center;
			flex-direction: row;
		}

		.audio-time {
			width: 150rpx;
			line-height: 100rpx;
		}

		.duration {
			margin-left: auto;
		}

		.audio-siler {
			// margin-top: 10rpx;
			width: 200%;
		}

		.play-silder {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.play-button-area {
			display: flex;
			flex-direction: row;
			justify-content: center;
			width: 100rpx;
		}

		.icon-play {
			width: 100rpx;
			height: 100rpx;
			/* margin-top: 5rpx; */
		}

		.page-bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			border-top: 1rpx solid rgba(0, 0, 0, 0.1);

			.icon-text {
				width: 70rpx;
				text-align: center;

				.text {
					font-size: 15rpx;
					color: #ccc;
					margin-top: -10rpx;
				}
			}

			.buy {
				background-color: #FE5477;
				height: 80rpx;
				width: 500rpx;
				border-radius: 40rpx;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
			}

			.have {
				background: #f6f6f6;
				height: 80rpx;
				width: 500rpx;
				border-radius: 40rpx;
				color: #ccc;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}

	.topView {
		background-color: #FFFFFF;
		// position: fixed;
		// top: 180rpx;
		width: 100%;
		// z-index: 6;

		.video-wrap {
			text-align: center;
			width: 100%;
			height: 400rpx;
			background-color: #000000;
		}

		.cover {
			.cover-image {
				width: 100%;
				height: 410rpx;
				z-index: 66;
				position: absolute;
				// top: 170rpx;
				right: 0;
			}
		}


		.detail {
			padding: 0 20rpx;
			margin: 0 20rpx;
			margin-top: 10rpx;
			min-height: 200rpx;
			width: 100%;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			position: relative;

			.name {
				font-size: 36rpx;
				// margin-left: 10rpx;
				font-weight: 700;
				// width: 90%;
			}

			.price {
				font-size: 36rpx;
				font-weight: 700;
				color: #FE5477;

				.orgPrice {
					// margin-left: 20rpx;
					// text-decoration: line-through;
					font-size: 26rpx;
					font-weight: 400;
					// color: #ccc;
				}
			}

			.secend-line {
				// position: absolute;
				color: #ccc;
				// margin-left: 40rpx;
				// padding-bottom: 20rpx;
				// margin-left: 10rpx;
				margin-top: 20rpx;

				.icon {
					margin-left: 10rpx;
				}

			}
		}

	}


	.class-list {
		margin: 30rpx;
		padding: 10rpx;
		font-size: 28rpx;
		background: #f9f9f9;
		border-radius: 20rpx;

		// padding: 20rpx;
		u-icon {
			margin-right: 20rpx;
		}

		.media {
			margin: 10rpx;
			min-height: 60rpx;
			border-bottom: 1rpx solid #CCC;
			display: flex;
			padding: 10rpx;

			.study-order {
				font-size: 20rpx;
				color: #FE5477;
			}
		}

		.play {
			background: #e6effb;
			color: #3d91d6;
			border-radius: 30rpx;
		}
	}

	.content-text {
		margin: 40rpx;
		margin-top: 0rpx;
		// margin-bottom: 200rpx;
		padding-bottom: 120rpx;
	}

	.font-style-xie {
		font-weight: 700;
		font-size: 32rpx !important;
		font-style: italic;

		.video-num {
			font-style: normal;
			font-weight: normal;
			font-size: 16rpx;
			color: #FE5477;
			float: right;
			margin-right: 10rpx;
			margin-top: 10rpx;
		}
	}

	.model {
		margin-top: 40rpx;
		padding: 0 40rpx;

		.scroll-view_H {
			margin-top: 20rpx;
			white-space: nowrap;
			width: 100%;

			.show-item {
				display: inline-block;

				.image {
					height: 200rpx;
					width: 300rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
					background-color: #ccc;
				}
			}
		}


	}
</style>